<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.App组件的使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			//创建Person组件
			const Person = Vue.extend({
				template:`
					<div>
						<h1>人员信息</h1>
						<h4>人的姓名：{{personName}}</h4>
						<h4>人的年龄：{{age}}</h4>
						<button @click="showPersonInfo">点我提示个人信息</button>	
					</div>
				`,
				data(){
					return {
						personName:'李强',
						age:80,
					}
				},
				methods:{
					showPersonInfo(){
						alert(`我叫${this.personName}，我今年芳龄：${this.age}`)
					}
				}
			})
			
			//创建School组件
			const School = Vue.extend({
				template:`
					<div>
						<h1>学校信息</h1>
						<h4>学校名称：{{schoolName}}</h4>
						<h4>学校地址：{{address}}</h4>
						<button @click="showSchoolInfo">点我提示学校信息</button>
					</div>
				`,
				data(){
					return {
						schoolName:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					showSchoolInfo(){
						alert(`学校是${this.schoolName}，坐落于${this.address}`)
					}
				}
			})

			//创建App组件
			const App = Vue.extend({
				components:{Person,School},
				template:`
					<div>
						<Person></Person>
						<hr>
						<School></School>
					</div>
				`,
				data(){
					return {
						x:999
					}
				},
				methods:{
					test(){
						console.log('test')
					}
				}
			})

			new Vue({
				el:'#demo',
				template:'<App></App>',
				components:{App}
			})
		</script>
	</body>
</html>